<template>
  <div>
    <van-steps :active="active" active-icon="success" active-color="#38f" style="text-align: left">
      <van-step>填写手机号</van-step>
      <van-step>填写验证码</van-step>
      <van-step>注册信息</van-step>
    </van-steps>
    <div v-if="this.active==0" style="width: 100%;height: 200px;background-color: #FFFFFF;margin-top: 10px;">
      <van-field v-model="driverPhone" type="digit" label="手机号" maxlength="11" placeholder="请输入手机号"/>
      <van-button style="margin-top: 12px;" @click="dangPhone">下一步</van-button>
    </div>
    <div v-if="this.active==1" style="width: 100%;height: 200px;background-color: #FFFFFF;margin-top: 10px">
      <van-field
          v-model="sms"
          center
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button size="small" type="primary" @click="goInformation">发送验证码</van-button>
        </template>
      </van-field>
      <van-button style="margin-top: 12px;" @click="active--;">上一步</van-button>
      <van-button style="margin-top: 12px;" @click="dangSms">下一步</van-button>
    </div>
    <div v-if="this.active==2" style="width: 100%;height: 765px;background-color: #FFFFFF;margin-top: 10px;padding-top: 8px">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名: " style="margin: 10px 0 0 0">
          <el-input v-model="form.driverName" placeholder="请输入用户名" style="width: 260px;height: 40px;margin-top: -10px"></el-input>
        </el-form-item>
        <el-form-item label="密码: ">
          <el-input v-model="form.password" placeholder="请输入密码"
                    show-password style="width: 260px;height: 40px;margin-top: 5px"></el-input>
        </el-form-item>
        <el-form-item label="再次输入密码: " style="margin-top: -20px">
          <el-input placeholder="请再次输入密码" v-model="form.again"
                    show-password style="width: 260px;height: 40px;margin-top: 10px"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="司机生日">
          <el-date-picker
              v-model="form.birthday"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="司机邮箱: " style="margin: 10px 0 0 0">
          <el-input v-model="form.email" placeholder="请输入邮箱" style="width: 260px;height: 40px;margin-top: -10px"></el-input>
        </el-form-item>
        <el-form-item label="头像" style="margin-top: 10px">
          <van-uploader :after-read="afterRead" v-model="driverImgurl" multiple :max-count="1"/>
        </el-form-item>
      </el-form>
      <van-button style="margin-top: 12px;" @click="goRegister">注册</van-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Step, Steps } from 'vant';
import {userRegister,findPhone,userSelectPhone} from "@/components/api/user/user";
import { Uploader } from 'vant';
import axios from "axios";

Vue.use(Uploader);

Vue.use(Step);
Vue.use(Steps);
export default {
  data() {
    return {
      loading: true,
      active: 0,
      aaa:false,
      driverPhone: '',
      driverImgurl: [],
      sms:'',
      sms1:'',
      dialogVisible: false,
      form:{
        driverName:'',
        driverImgurl: '',
        driverPhone:'',
        password:'',
        sex:'',
        birthday:'',
        email:'',
      },
    };
  },
  methods:{
    goInformation(){
      const phone=this.driverPhone;
      findPhone(phone).then(response => {
        this.sms1=response.data;
        if (response.code==1){
          this.$message({
            message: '验证码已发送',
            type: 'success',
            duration: 800
          })
        }else {
          this.$message({
            message: '验证码发送失败',
            type: 'warning',
            duration: 800
          })
        }
          })
        },
    dangPhone(){
      const phone=this.driverPhone;
      userSelectPhone(phone).then(response => {
        console.log(response)
        if (response.data==0){
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
          if (reg.test(this.driverPhone)){
            this.active++;
          }else {
            this.$toast('您输入的手机号格式不正确，请重新输入');
          }
        }else {
          this.$toast('该手机号已注册,请重新输入');
        }
      })

    },
    dangSms(){
      if (this.sms.length==4){
        if (this.sms==this.sms1){
          this.active++;
        }else if (this.sms!=this.sms1){
          this.$toast('验证码错误');
        }
      }else if (this.sms.length==0||this.sms.length!=4||this.sms==''){
        this.$toast('请输入正确短信验证码');
      }
    },
    goRegister(){
      const emil= /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (this.form.driverName==''){
        this.$toast('请输入用户名');
      }else if (this.form.password==''){
        this.$toast('请输入密码');
      }else if (this.form.again==''){
        this.$toast('请再次输入密码');
      }else if (this.form.password!=this.form.again){
        this.$toast('两次密码不一致');
      }else if (this.form.sex==''){
        this.$toast('请选择性别');
     }else if (this.form.birthday==''){
        this.$toast('请选择生日');
     }else if (this.form.email==''){
        this.$toast('请输入邮箱');
     }else if (!emil.test(this.form.email)){
        this.$toast('请输入正确的邮箱');
      }else if (this.driverImgurl.length==0){
        this.$toast('请上传头像');
     }else {
        this.form.driverPhone=this.driverPhone;
        userRegister(this.form).then( response=>{
            console.log(response)
            console.log(this.form)
            this.$toast('注册成功');
            this.$router.push('/');
        })
     }
      },
    afterRead(file){
      axios.post('http://localhost:8849/user/file/upload',file,{headers:{'Content-Type':'multipart/form-data'}}).then(res=>{
        this.form.driverImgurl=res.data.data.url;
        this.driverImgurl[0]=res.data.data.url;
      })
    }
    }
};
</script>

<style>
.avatar {
  width: 70px;
  height: 70px;
  display: block;
}
.avatar-uploader .el-upload {
     border: 1px dashed #d9d9d9;
     border-radius: 6px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     margin-left: -200px;
   }
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 70px;
  height: 50px;
  margin-top: 20px;
  text-align: center;
}
</style>